<template>
  <div>
    <a-spin :spinning="loading">
      <a-form layout="vertical" class="operate-page-form" :model="formState" ref="formRef" :rules="makeListRule">
        <div class="operate-page-content">
          <div class='blue-line mb-13'>{{ $t('hangManage.baseInfo') }}</div>
          <a-row :gutter="40">
            <a-col :span="6">
              <a-form-item :label="`${$t('hangManage.makeNo')}:`">
                <span class="break-all"> {{formState.moNo}} </span>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label="`${$t('hangManage.workOrderNo')}:`"> {{formState.workOrderNo}} </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label="`${$t('hangManage.preProductTime')}:`">{{formState.productDate}}</a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="40">
            <a-col :span="6">
              <a-form-item :label="`${$t('basicData.styleNo')}:`"> {{getFieldText(styleList, formState.styleId, 'id', 'styleNo')}} </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label="`${$t('basicData.styleNa')}:`"> {{getText(styleList, formState.styleId)}} </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label="`${$t('basicData.productType')}:`"> {{formState.productType}} </a-form-item>
            </a-col>
          </a-row>
          <div class='blue-line mb-13 mt-10'>{{  $t('menu.basic:order')  }}</div>
          <a-row :gutter="40">
            <a-col :span="6">
              <a-form-item :label="`${$t('basicData.orderNo')}:`">{{getText(orderList, formState.orderId)}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label="`${$t('basicData.customerName')}:`">{{getText(customList, formState.customId)}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label="`${$t('basicData.PayDate')}:`">{{formState.deliveryDate}}</a-form-item>
            </a-col>
          </a-row>
          <div class='blue-line mb-13 mt-10'>{{ $t('hangManage.makeInfo')  }}</div>
          <div>
            <MakeDetailTable ref="makeDetailTable" :tableData="detailTableData" :isDetails="true" />
          </div>

          <div class='blue-line mb-13 mt-10'>生产明细</div>
          <div>
            <ProductTable ref="productTable" :tableData="schList" :isDetails="true" />
          </div>

        </div>
        <div class="operate-page-btns">
          <a-space>
            <a-button @click="closeTab" class="cancel">{{ $t('other.back') }}</a-button>
          </a-space>
        </div>
      </a-form>
    </a-spin>
  </div>
</template>
<script setup  name="operateStaff">
import MakeDetailTable from './makeDetailTable.vue'
import ProductTable from './productTable.vue'
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { makeListRule } from './makeConfig'
import axios from '@/utils/request'
import { getText, getFieldText } from '@/utils'
import { cloneDeep } from 'lodash'
import { store } from '@/store'
import moment from 'moment'
const route = useRoute()
const router = useRouter()
let recordInfo = ref({})
let loading = ref(false)
const orderList = computed(() => {
  return store.state.normalData.orderList
})
const styleList = computed(() => {
  return store.state.normalData.styleList
})
const customList = computed(() => {
  return store.state.normalData.customList
})
const tabs = computed(() => {
  return store.state.setting.tabs
})
let detailTableData = ref([])
let schList = ref([])
let formState = ref({})
const formRef = ref()
const makeDetailTable = ref()
const styleChange = (value) => {
  let data = getStyleInfo(value)
  Object.assign(formState.value, data)
}
const getStyleInfo = (value) => {
  const selectStyle = value ? styleList.value.filter(i => i.id == value)[0] : {}
  return {
    styleId: selectStyle.id,
    productType: selectStyle.productType
  }
}

const orderChange = (value) => {
  let data = getOrderInfo(value)
  Object.assign(formState.value, data)

}
const getOrderInfo = (value) => {
  const selectOrder = value ? orderList.value.filter(i => i.id == value)[0] : {}
  return {
    orderId: selectOrder.id,
    customId: selectOrder.customId,
    deliveryDate: selectOrder.deliveryDate && moment(selectOrder.deliveryDate).format('YYYY-MM-DD')
  }
}

const closeTab = async (isSuccess) => {
  const tabList = cloneDeep(tabs.value)
  let changeTabs = tabList.filter((i) => {
    if (isSuccess) {
      return !['/makeManage/makeList', route.path].includes(i.path)
    } else {
      return i.path !== route.path
    }
  })
  await store.commit('updateState', { tabs: changeTabs })

  if (route.query.type == 'sch') {
    router.push({
      path: '/makeManage/autoScheduleOnline'
    })
  } else {
    router.back()
  }
}

const initFormData = async () => {
  let record = { ...recordInfo.value }
  detailTableData.value = record.moDetailList

  record.orderDate && (record.orderDate = moment(record.orderDate).format('YYYY-MM-DD'))
  record.deliveryDate && (record.deliveryDate = moment(record.deliveryDate).format('YYYY-MM-DD'))
  record.productDate && (record.productDate = moment(record.productDate).format('YYYY-MM-DD'))
  await nextTick()

  formRef.value && formRef.value.resetFields()
  formState.value = cloneDeep(record)
  if (record.styleId) styleChange(record.styleId)
  if (record.orderId) orderChange(record.orderId)
}

const getDetailInfo = async (id) => {
  try {
    const res = await axios.getAction('/api/mo/mo/get', { id })
    if (res.success) {
      recordInfo.value = res.data
      // 根据制单号获取 排产单列表
      schList.value = res.data.moProductDetailVOList || []
    }

    /*if(res.data?.moNo){
      await getSchList(res.data?.moNo)
    }*/

  } catch {
    closeTab()
  }
}
/*const getSchList = async (moNo) => {
  let param = {}
  param.moNo = moNo
  param.status = [2]
  param.pageNo = 1
  param.pageSize = 62500
  try {
    const res = await axios.postAction('/api/hanger/schedule-bill/list', param)
    if (res.success) schList.value = res.data || []
  } catch {
    // closeTab()
  }
}*/

onMounted(async () => {
  loading.value = true
  if (!route.query.id) {
    closeTab()
    return
  }
  await store.dispatch('getOrder')
  await store.dispatch('getCustom')
  await store.dispatch('getStyle')
  if (route.query.id) await getDetailInfo(route.query.id)

  initFormData()
  loading.value = false
})
</script>
